<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="6">
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目名称:" class="font">
              <a-input></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目编号:" class="font">
              <a-input></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目状态:" class="font">
              <a-select>
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in statedata"
                  :key="index"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="行政区:" class="font">
              <a-select>
                <a-select-option value="0">未公布</a-select-option>
                <a-select-option value="1">已公布</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="3" :lg="7" :md="8" :sm="24">
            <a-form-item>
              <a-select>
                <a-select-option value="0">未公布</a-select-option>
                <a-select-option value="1">已公布</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                class="cz"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      bordered
      rowKey="id"
      ref="table"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
    >
    </a-table>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "备案编号",
          dataIndex: "pjtname",
          align: "left",
          scopedSlots: { customRender: "pjtname" },
        },
        {
          title: "项目名称",
          dataIndex: "xzq",
          align: "left",
        },
        {
          title: "当前状态",
          dataIndex: "babh",
          align: "left",
        },
        {
          title: "操作时间",
          dataIndex: "scmj",
          align: "center",
        },
      ],
      ipagination: {
        current: 1,
        pageSize: 10, // 默认每页显示数量
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return "共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      selectedRowKeys: [],
      dataSource: [
        {
          pjtname: "五莲县果树大本营种植园(三期大榆林)",
          xzq: "20240607889922",
        },
      ],
      statedata: [
        {
          id: " ",
          name: "全部",
        },
        {
          id: "1",
          name: "待报部备案",
        },
        {
          id: "2",
          name: "内业核查退回",
        },
        {
          id: "3",
          name: "内业检查",
        },
        {
          id: "4",
          name: "待外业核查",
        },
        {
          id: "5",
          name: "外业核查中",
        },
        {
          id: "6",
          name: "待市级审核",
        },
        {
          id: "7",
          name: "市级审核退回",
        },
        {
          id: "8",
          name: "待省级审核",
        },
        {
          id: "9",
          name: "省级审核退回",
        },
        {
          id: "10",
          name: "问题项目",
        },
        {
          id: "11",
          name: "指标入库项目",
        },
      ],
    };
  },
  methods: {
    searchQuery(){

    },
    searchReset(){
        
    }
  },
};
</script>
  
  <style lang="less" scoped>
.font {
  font-weight: 700;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  color: #4d5259;
}
.gongneng {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  padding: 10px;
}
.cz {
  margin-left: 8px;
}
.table-page-search-wrapper {
  margin-top: 10px;
}
</style>